<template>
  <div class="setting-app-container">
    <div class="applet-blendent-header">设置应用基本信息</div>
    <el-form :model="appSettingData" :rules="rules" ref="settingform" label-width="170px" size="small" style="margin: 20px auto">
      <!--<el-form-item label="商城分类">
        <el-select v-model="appSettingData.shop_category_id" placeholder="请选择" style="width: 40%">
          <el-option
            v-for="item in shopTypeList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>-->
      <el-form-item label="应用名称" prop="name">
        <el-input v-model="appSettingData.name" placeholder="请输入" style="width: 40%"/>
      </el-form-item>
      <el-form-item label="Logo图片">
        <select-img @selectData="data => appSettingData.pic_url = data[0]"/>
      </el-form-item>
      <el-form-item v-if="appSettingData.pic_url !== '' && appSettingData.pic_url">
        <l-pic :picurl="appSettingData.pic_url" :size="{width:100, height:100}" :disdel="false" :disview="false"/>
      </el-form-item>
      <el-form-item label="客服电话" prop="phone">
        <el-input v-model="appSettingData.phone" placeholder="请输入" style="width: 40%"/>
      </el-form-item>
      <el-form-item label="供应商联系电话" prop="supplier_phone">
        <el-input v-model="appSettingData.supplier_phone" placeholder="请输入" style="width: 40%"/>
      </el-form-item>
      <el-form-item label="团长联系电话" prop="leader_phone">
        <el-input v-model="appSettingData.leader_phone" placeholder="请输入" style="width: 40%"/>
      </el-form-item>
      <el-form-item label="登录背景图">
        <select-img @selectData="data => appSettingData.pic_url_login = data[0]"/>
      </el-form-item>
      <el-form-item v-if="appSettingData.pic_url_login !== ''">
        <l-pic :picurl="appSettingData.pic_url_login" :size="{width:100, height:100}" :disdel="false" :disview="false"/>
      </el-form-item>
      <el-form-item label="转发默认图">
        <select-img @selectData="data => appSettingData.default_pic_url = data[0]"/>
      </el-form-item>
      <el-form-item v-if="appSettingData.default_pic_url !== ''">
        <l-pic :picurl="appSettingData.default_pic_url" :size="{width:100, height:100}" :disdel="false" :disview="false"/>
      </el-form-item>
      <el-form-item label="商城介绍" prop="detail_info">
        <el-input v-model="appSettingData.detail_info" type="textarea" placeholder="请输入" style="width: 40%"/>
      </el-form-item>
      <el-form-item label="会员卡状态">
        <el-radio-group v-model="appSettingData.user_vip">
          <el-radio label="0">关闭</el-radio>
          <el-radio label="1">会员卡(付费)</el-radio>
          <el-radio label="2">会员卡(积分)</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="购买信息">
        <el-switch v-model="appSettingData.pay_info" active-color="#13ce66" active-value="1" inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="积分商城">
        <el-switch v-model="appSettingData.score_shop" active-color="#13ce66" active-value="1" inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="团长等级">
        <el-switch v-model="appSettingData.leader_level" active-color="#13ce66" active-value="1" inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="添加我的小程序">
        <el-switch v-model="appSettingData.my_mini_info" active-color="#13ce66" active-value="1" inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="好物圈">
        <el-switch v-model="appSettingData.good_phenosphere" active-color="#13ce66" active-value="1" inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="余额支付">
        <el-switch v-model="appSettingData.balance_pay" active-color="#13ce66" active-value="1" inactive-value="0"></el-switch>
      </el-form-item>
<!--      <el-form-item label="闪送">-->
<!--        <el-switch v-model="appSettingData.shansong" active-color="#13ce66" active-value="1" inactive-value="0"></el-switch>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="UU跑腿">-->
<!--        <el-switch v-model="appSettingData.uu_is_open" active-color="#13ce66" active-value="1" inactive-value="0"></el-switch>-->
<!--      </el-form-item>-->
      <el-form-item label="点我达">
        <el-switch v-model="appSettingData.dianwoda_is_open" active-color="#13ce66" active-value="1" inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="门店">
        <el-switch v-model="appSettingData.store_is_open" active-color="#13ce66" active-value="1" inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="易联云">
        <el-switch v-model="appSettingData.yly_print" active-color="#13ce66" active-value="1" inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="是否显示商品库存">
        <el-switch v-model="appSettingData.is_stock" active-color="#13ce66" active-value="1" inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="详情页是否显示商家信息">
        <el-switch v-model="appSettingData.is_merchant_info" active-color="#13ce66" active-value="1" inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="是否显示头部">
        <el-switch v-model="appSettingData.is_info_header" active-color="#13ce66" active-value="1" inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="是否显示底部">
        <el-switch v-model="appSettingData.is_info_bottom" active-color="#13ce66" active-value="1" inactive-value="0"></el-switch>
      </el-form-item>
      
      
      <el-form-item label="团长确认收货天数">
        <el-input v-model="appSettingData.leader_confirm" placeholder="请输入" style="width: 40%"/>
      </el-form-item>
      <el-form-item label="团长确认发货天数">
        <el-input v-model="appSettingData.leader_send" placeholder="请输入" style="width: 40%"/>
      </el-form-item>
      <el-form-item label="用户确认收货天数">
        <el-input v-model="appSettingData.user_confirm" placeholder="请输入" style="width: 40%"/>
      </el-form-item>
      <el-form-item label="经纬度">
        <el-input v-model="appSettingData.coordinate" placeholder="请输入" style="width: 40%"/>
        <el-button type="text" @click="disMap = true">选取坐标</el-button>
      </el-form-item>
      <el-form-item label="起订价">
        <el-input v-model="appSettingData.starting_price" placeholder="请输入" style="width: 40%"/>
      </el-form-item>
    </el-form>


    <div style="text-align:center;margin-top:15px">
      <el-button type="primary" size="small" style="padding:8px 30px;" @click="submit">提 交</el-button>
    </div>

    <Modal v-model="disMap" width="1128" :footer-hide="true">
      <zm-map @selectPoint="point => { appSettingData.coordinate = point.lng + ',' + point.lat ; disMap = false }"/>
    </Modal>
  </div>
</template>

<script>
/**
 * write a component's description
 */
import { getAppSetting, getShopTypeList, putAppSetting } from '@/api/setting'
import SelectImg from '@/components/SelectImg'
import LPic from '@/components/lPic'
import ZmMap from '@/components/ZmMap'

export default {
  name: 'setting-appsetting',
  components: {
    SelectImg,
    LPic,
    ZmMap
  },
  /**
   * @description
   * @returns {any}
   */
  data() {
    return {
      appSettingData: {
        name: '',
        pic_url: '',
        phone: '',
        supplier_phone: '',
        leader_phone: '',
        pic_url_login:'',
        default_pic_url: '',
        detail_info: '',
        user_vip: '',
        pay_info: '',
        score_shop: '',
        leader_level: '',
        my_mini_info: '',
        good_phenosphere: '',
        balance_pay: '',
        shansong: '',
        uu_is_open: '',
        dianwoda_is_open: '',
        store_is_open: '',
        yly_print: '',
        is_stock: '',
        is_merchant_info: '',
        is_info_header: '',
        is_info_bottom: '',
        leader_confirm: '',
        leader_send: '',
        user_confirm: '',
        coordinate: '',
        starting_price: '',
        key: '',
        shop_category_id: '',
        estimated_service_time_info: { estimated_type: "1", is_estimated: "0" },
      },
      shopTypeList: [],
      show: false,
      estimated: {estimated_type: "1", is_estimated: "0"},
      disMap: false,

      rules: {
        name:[{ required:true, message:'请输入店铺名称', trigger: 'blur' }],
        phone:[{ required:true, message:'请输入客服电话', trigger: 'blur' }],
        supplier_phone:[{ required:true, message:'请输入供应商联系电话', trigger: 'blur' }],
        leader_phone:[{ required:true, message:'请输入团长联系电话', trigger: 'blur' }],
        detail_info:[{ required:true, message:'请输入商城介绍', trigger: 'blur' }],
      }
    }
  },
  /**
   * @description
   */
  mounted() {
    this.getAppSetting();
    this.getShopTypeList();
  },
  methods: {
    /**
     * 获取基本信息
     */
    /**
     * @description
     */
    getAppSetting() {
      getAppSetting({ id: this.$store.state.app.activeApp.saa_id, key: this.$store.state.app.activeApp.saa_key }).then(res => {
        if(res.status === 200) {
          this.appSettingData = res.data;
          // this.show = true;
          this.estimated = this.appSettingData.estimated_service_time_info ? this.appSettingData.estimated_service_time_info : {estimated_type: "1", is_estimated: "0"};
          if (this.appSettingData.pic_url_login === ''){
            this.appSettingData.pic_url_login = 'https://api.juanpao.com/uploads/default_poster/poster02.png'
          }
        }else if(res.status === 204) {
          // this.show = true;
        }
        else{
          this.$message.error(res.message);
        }
      })
    },
    /**
     * 获取商城分类
     */
    /**
     * @description
     */
    getShopTypeList() {
      getShopTypeList().then(res => {
        if(res.status === 200) {
          this.shopTypeList = res.data;
        }else{
          this.$message.error(res.message);
        }
      })
    },
    /**
     * 送达时间方式更改
     */
    /**
     * @description
     */
    TimeTypeChange() {
      if(this.estimated.estimated_type === '2') {
        this.estimated.estimated_time = [''];
        this.estimated.estimated_data = [];

      }else if(this.estimated.estimated_type === '3') {
        this.estimated.estimated_time = [''];
        this.estimated.estimated_data = [''];
      }else{
        this.estimated.estimated_time = [''];
        this.estimated.estimated_data = [];
      }
    },
    /**
     * 提交
     */
    /**
     * @description
     */
    submit() { 
      this.$refs.settingform.validate(valid => {
        if(valid) {
          this.appSettingData.id = this.$store.state.app.activeApp.saa_id;
          this.appSettingData.key = this.$store.state.app.activeApp.saa_key;
          delete this.appSettingData.reduction_info;
          delete this.appSettingData.update_time;
          delete this.appSettingData.delete_time;
          delete this.appSettingData.create_time;
          putAppSetting({...this.appSettingData}).then(res => {
            if(res.status === 200) {
              this.$message.success('修改成功！');
            }else{
              this.$message.error(res.message);
            }
          })
        }else{
          this.$message.warning('请按要求完整填写表单！')
        }
      })
    },
    /**
     * @description
     */
    input_change() {
      this.$forceUpdate()
    }
  },
}
</script>

<style lang="scss" scoped>
.setting-app-container{
  min-height: calc(100vh - 100px);
  margin: 20px;
  background-color: #fff;
  padding:25px;
  box-shadow: 0px 0px 4px 0px rgba(115, 115, 115, 0.2);
}
.applet-blendent-header{
  height: 40px;
  width: 100%;
  line-height: 40px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #8f8f8f;
  padding: 0 10px;
  background-color: #F4F8FB;
}
</style>
